<template>
  <div class="antv-chart-mini">
    <div class="chart-wrapper" :style="{ height: '100px' }">
      <v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :padding="[36, 0, 18, 0]">
        <v-tooltip />
        <v-smooth-area position="x*y" />
      </v-chart>
    </div>
  </div>
</template>

<script>
import moment from 'dayjs'
import { getAction } from '@api/manage'

export default {
  name: 'MiniArea',
  data() {
    return {
      data: [],
      height: 100
    }
  },
  computed: {
    scale() {
      return [
        { dataKey: 'x', title: this.x, alias: this.x },
        { dataKey: 'y', title: this.y, alias: this.y }
      ]
    }
  },
  methods: {
    getTenDailyDingDan() {
      getAction("/dayincopy/tableDayinCopy/tenDailyDingDan", '')
        .then(res => {
          const formattedData = res.result.map(e => ({
            x: e.order_date,
            y: e.daily_orders
          }));
          this.data = formattedData;
        })
        .catch(error => {
          console.error("获取10天销售订单数量出错:", error);
        });
    }
  },
  created() {
    this.getTenDailyDingDan();
  }
}
</script>

<style lang="less" scoped>
@import "chart";
</style>
